<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/page2.css">
    <link rel="stylesheet" href="css/fly.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // viewport 设置
        // 针对原来高清方案的基础, 增加了根据屏幕宽度计算不同font-size 来达到对不同屏幕的适配
        var win = window;
        win.flex = function (baseFontSize, fontscale) {
            var targetWidth = 375;
            var screenWidth = win.screen.width;
            var _baseFontSize = (baseFontSize || 100) * screenWidth / targetWidth;
            var _fontscale = fontscale || 1;

            var doc = win.document;
            var ua = navigator.userAgent;
            var matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
            var UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
            var isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
            var isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
            var dpr = win.devicePixelRatio || 1;
            if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
                //在部分4.3及以下安卓机型中，screen.width是物理像素宽度，暂时没有找到准确判断的方法，所以不做针对375宽度的缩放
                _baseFontSize = baseFontSize || 100;
                // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
                dpr = 1;
            }


            var scale = 1 / dpr;

            var metaEl = doc.querySelector('meta[name="viewport"]');
            if (!metaEl) {
                metaEl = doc.createElement('meta');
                metaEl.setAttribute('name', 'viewport');
                doc.head.appendChild(metaEl);
            }
            metaEl.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale +
                ',maximum-scale=' + scale + ',minimum-scale=' + scale);
            doc.documentElement.style.fontSize = _baseFontSize / 2 * dpr * _fontscale + 'px';
        };

        flex(100, 1);
    </script>
</head>

<div id="page2" class="shine_bg" style="display: block">
    <div class="therm">
        <div class="word1 "></div>
        <div class="word2 "></div>
        <div class="word3 "></div>
        <div class="word4 "></div>
        <div class="word5 "></div>
        <div class="word6 "></div>
        <div class="therm_point">
        </div>
        <div class="therm_scale">
        </div>
    </div>
    <div class="hand_heart shine_heart"></div>
    <div class="walk_Man"></div>
    <div class="button"></div>
</div>
</body>
<script>
    $(document).ready(function () {

        var page2Fun = function(){
            var $word1 = $(".word1")
        var $word2 = $(".word2")
        var $word3 = $(".word3")
        var $word4 = $(".word4")
        var $word5 = $(".word5")
        var $word6 = $(".word6")
        var $page2Btn = $("#page2 .button")
        var $page2 = $("#page2");
        var tag = 1;


        window.setTimeout(function () {

            $word1.addClass("word1_animation")
            window.setTimeout(function () {

                $word2.addClass("word2_animation")
                window.setTimeout(function () {

                    $word3.addClass("word3_animation")
                    window.setTimeout(function () {

                        $word4.addClass("word4_animation")
                        window.setTimeout(function () {

                            $word5.addClass("word5_animation")
                            window.setTimeout(function () {

                                $word6.addClass(
                                    "word6_animation")
                                window.setTimeout(function () {

                                    $page2Btn.on("click",
                                        function () {
                                            window.location
                                                .href =
                                                "./page4.html";
                                        })

                                }, 1500)
                            }, 1500)
                        }, 1500)
                    }, 2500)
                }, 1500)
            }, 1500)
        }, 0);


        

        function changeBg(){
            if(tag === 1 ){
                tag = 2 
                $page2.css("background-image","url('./assets/images/page2/page2_bg2.png')");
               
            }else if(tag === 2 ){
                tag = 1 
                $page2.css("background-image","url('./assets/images/page2/page2_bg1.png')");
            }
        }

        window.setInterval(function(){
            changeBg();
        }, 200)
        }

        page2Fun();

       

    
    });
</script>

</html>